Highlighted Multi-Line Chart

Compares trends of multiple variables over time, with the ability to highlight specific lines. This allows for easy identification and comparison of the trends of different variables. It is useful for analyzing the performance of different products, the spread of different diseases, or the economic indicators of different countries.

Chart:

Code:

  muze
    .canvas()
    .columns(["date"])
    .rows(["unemployment"])
    .layers([
      {
        mark: "line",
        encoding: {
          color: "division",
          opacity: {
            value: (d) => {
              const str = d?.datum?.dataObj["division"];
              const substr = str.includes(", MI ");
              if (substr) {
                return 1;
              } else {
                return 0.1;
              }
            },
          },
        },
      },
    ])
    .config({
      legend: {
        show: false,
      },
    })